<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>系统概览</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-4">
			<div class="ibox-content">
				<div class="alert alert-info">
					<h3>班级数量</h3>
					<p id="clazz" >
						<h2 th:text="*{clazzCount}" style="margin-left: 30px"></h2>
					</p>
				</div>
			</div>
        </div>
		<div class="col-sm-4">
			<div class="ibox-content">
				<div class="alert alert-warning">
					<h3>学生数量</h3>
					<p id="student">
						<h2 th:text="*{studentCount}" style="margin-left: 30px"></h2>
					</p>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox-content">
				<div class="alert alert-danger">
					<h3>书籍数量</h3>
					<p id="book">
					    <h2 th:text="*{bookCount}" style="margin-left: 30px"></h2>
					</p>
				</div>

			</div>
		</div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>书籍分类</h5>

                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>个人阅读积分排行榜TOP10</h5>

                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>

    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
    <script type="text/javascript">
	    $('#pay-qruser_id').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });
        // var recordList = [[${recordList}]];

        // let data=[
        //     {"user_id":"600519","user_name":"aaa","totalRecord":"21.987691"},
        //     {"user_id":"000858","user_name":"bbb","totalRecord":"20.377176"},
        //     {"user_id":"002475","user_name":"ccc","totalRecord":"19.127404"},
        //     {"user_id":"600276","user_name":"ddd","totalRecord":"18.40882"},
        //     {"user_id":"601318","user_name":"eee","totalRecord":"17.980597"},
        //     {"user_id":"000661","user_name":"fff","totalRecord":"16.957898"},
        //     {"user_id":"000333","user_name":"ggg","totalRecord":"15.099577"},
        //     {"user_id":"300760","user_name":"eee","totalRecord":"14.76103"},
        //     {"user_id":"300750","user_name":"ttt","totalRecord":"13.002175"},
        //     {"user_id":"601888","user_name":"fff","totalRecord":"12.133536"}
        // ]
        let data = [(${recordList})];

        function contains(arr, dst) {
            var i = arr.length;
            while ((i -= 1)) {
                if (arr[i] == dst) {
                    return i;
                }
            }
            return false;
        }


        var attackSourcesColor = [
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "#EB3B5A" },
                { offset: 1, color: "#FE9C5A" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "#FA8231" },
                { offset: 1, color: "#FFD14C" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "#F7B731" },
                { offset: 1, color: "#FFEE96" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "#395CFE" },
                { offset: 1, color: "#2EC7CF" }
            ])
        ];
        var attackSourcesColor1 = [
            "#EB3B5A",
            "#FA8231",
            "#F7B731",
            "#3860FC",
            "#1089E7",
            "#F57474",
            "#56D0E3",
            "#1089E7",
            "#F57474",
            "#1089E7",
            "#F57474",
            "#F57474"
        ];
        var attaData = [];
        var attaName = [];
        var topName=[]
        data.forEach((it, index) => {
            attaData[index] = parseFloat(it.totalRecord);
            attaName[index] = it.user_name;
            topName[index] = `姓名:${it.user_name},总分:${it.totalRecord}`
        });
        topName = topName.reverse();
        var salvProMax = []; //背景按最大值
        for (let i = 0; i < attaData.length; i++) {
            salvProMax.push(attaData[0]);
        }
        function attackSourcesDataFmt(sData) {
            var sss = [];
            sData.forEach(function(item, i) {
                let itemStyle = {
                    color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
                };
                sss.push({
                    value: item,
                    itemStyle: itemStyle
                });
            });
            return sss;
        }

        $(function (){
            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
            var baroption = {
                tooltip: {
                    show: false,
                    backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
                    textStyle: {
                        fontSize: 16
                    }
                },
                color: ["#F7B731"],
                legend: {
                    show: false,
                    pageIconSize: [12, 12],
                    itemWidth: 20,
                    itemHeight: 10,
                    textStyle: {
                        //图例文字的样式
                        fontSize: 10,
                        color: "#fff"
                    },
                    selectedMode: false,
                    data: ["阅读得分"]
                },
                grid: {
                    left: "5%",
                    right: "2%",
                    width:"100%",
                    bottom: "2%",
                    top: "8%",
                    containLabel: true
                },
                xAxis: {
                    type: "value",

                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                //margin: 30
                            }
                        },
                        pdaaing: [5, 0, 0, 0],
                        postion: "right",
                        data: attaName,
                        axisLabel: {
                            margin: 30,
                            fontSize: 10,
                            align: "left",
                            padding: [2, 0, 0, 0],
                            color: "#000",
                            rich: {
                                nt1: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[0],
                                    width: 13,
                                    height: 13,
                                    fontSize: 10,
                                    align: "center",
                                    borderRadius: 100,
                                    lineHeight: "5",
                                    padding: [0, 1, 2, 1]
                                    // padding:[0,0,2,0],
                                },
                                nt2: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[1],
                                    width: 13,
                                    height: 13,
                                    fontSize: 10,
                                    align: "center",
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1]
                                },
                                nt3: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[2],
                                    width: 13,
                                    height: 13,
                                    fontSize: 10,
                                    align: "center",
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1]
                                },
                                nt: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[3],
                                    width: 13,
                                    height: 13,
                                    fontSize: 10,
                                    align: "center",
                                    lineHeight: 3,
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1],
                                    lineHeight: 5
                                }
                            },
                            formatter: function(value, index) {
                                index = contains(attaName, value) + 1;
                                if (index - 1 < 3) {
                                    return ["{nt" + index + "|" + index + "}"].join("\n");
                                } else {
                                    return ["{nt|" + index + "}"].join("\n");
                                }
                            }
                        }
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: "10"
                            }
                        },
                        data: attackSourcesDataFmt(attaName)
                    },
                    {//名称
                        type: 'category',
                        offset: -10,
                        position: "left",
                        axisLabel: {
                            color: `#fff`,
                            fontSize: 10
                        },
                        axisLine: {
                            show: false
                        },
                        inverse: false,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: ["#000"],
                            align: "left",
                            verticalAlign: "bottom",
                            lineHeight: 32,
                            fontSize: 10
                        },
                        data: topName
                    },
                ],
                series: [
                    {
                        zlevel: 1,
                        name: "阅读积分",
                        type: "bar",
                        barWidth: "15px",
                        animationDuration: 1500,
                        data: attackSourcesDataFmt(attaData),
                        align: "center",
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10
                            }
                        },
                        label: {
                            show: true,
                            fontSize: 10,
                            color: "#fff",
                            textBorderWidth: 2,
                            padding: [2, 0, 0, 0]
                        }
                    },
                    {
                        name: "阅读积分",
                        type: "bar",
                        barWidth: 15,
                        barGap: "-100%",
                        margin: "20",
                        data: salvProMax,
                        textStyle: {
                            //图例文字的样式
                            fontSize: 10,
                            color: "#fff"
                        },
                        itemStyle: {
                            normal: {
                                color: "#05325F",
                                //width:"100%",
                                fontSize: 10,
                                barBorderRadius: 30
                            },
                        }
                    }
                ]
            };
            barChart.setOption(baroption);

            window.onresize = barChart.resize;



            let title = '总量';
            let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
            let echartData = [(${bookClassify})];

            let formatNumber = function(num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ',');
            }
            let total = echartData.reduce((a, b) => {
                return a + b.value * 1
            }, 0);
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            var pieoption = {
                color: color,
                title: [{
                    text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
                    top: 'center',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                fontWeight: 'normal',
                                color: '#666666',
                                padding: [10, 0]
                            },
                            val: {
                                fontSize: 32,
                                fontWeight: 'bold',
                                color: '#333333',
                            }
                        }
                    }
                },{
                    text: '单位：本',
                    top: 20,
                    left: 20,
                    textStyle: {
                        fontSize: 14,
                        color:'#666666',
                        fontWeight: 400
                    }
                }],
                series: [{
                    type: 'pie',
                    radius: ['45%', '60%'],
                    center: ['50%', '50%'],
                    data: echartData,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            borderWidth: 2
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 120,
                            lineStyle: {
                                color: '#e6e6e6'
                            }
                        }
                    },
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    '{icon|●}{name|' + params.name + '}{value|' +
                                    formatNumber(params.value) + '}'
                                );
                            },
                            padding: [0 , -100, 25, -100],
                            rich: {
                                icon: {
                                    fontSize: 16
                                },
                                name: {
                                    fontSize: 14,
                                    padding: [0, 10, 0, 4],
                                    color: '#666666'
                                },
                                value: {
                                    fontSize: 18,
                                    fontWeight: 'bold',
                                    color: '#333333'
                                }
                            }
                        }
                    },
                }]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);
        })
    </script>
</body>
</html>
